大 Vue3 時代開始了
v3.0.0 One Piece

再進入 Vue3的篇章之前，內容還是會以 Vue 2.6 版本為主喔

讓我們來看看如何定義一個 Vue Component

宣告

我們先來看看Vue的全域 API Vue.component 它接收兩個參數

• Id：就是我們定義的 Component Name
• Definition：這個參數可以是 Funtion 或是 Object，一般時候我們會使用 Object的形式佔絕大多數

重點呢，就在這個 Definition，他其實就是每一個 Component 的主體，我們就是利用這個物件提供的選項定義出我們所需要的 Component，我們就來看看有那些選項可供使用吧

选项 / 数据
這裡面有我們最常用最熟悉的一些項目 data props computed watch methods

注意
Component 裡的 data 選項，必須是一個函數返回的形式

    const Foo = {
       template: "...";
       data(){
        return {}
       }
    }

选项 / 生命周期钩子

• 生命週期 Hooks 指的是 Vue instance 裡的生命週期
• 如果你有使用 Vue Router，他提供了 组件内的守卫 Hooks，也是會寫在這邊的喔

选项 / DOM

• el：比較特殊的選項，只用在一開始 new Vue() 的時候，告訴 Vue 我們想要把 Vue instance 掛載到那個位置

选项 / 资源

• components: 下個段落就會介紹他囉

其他還有這些：选项 / 组合 | 选项 / 其它可以使用，就讓大家自行發掘囉

其實看到這邊你應該會發現，定義一個 Component 使用的選項，基本上跟一開始我們創建 Vue instance可用的選項相差無幾，是的每個 Component 其實就是 Vue instance的子類別，所以每個 Component 都有自己的數據以及生命週期，這也是為什麼在 Component 裡面 data 必須以一個函數返回的形式存在

明天再來談談怎麼開始使用 Component